<section>
    <h1 class="blue" data-id="#basics/layout"><i class="ace-icon fa fa-desktop grey"></i> Layout</h1>

    <div class="hr hr-double hr32"></div>
    <h2 class="blue lighter" data-id="#basics/layout.default">
        Default layout
    </h2>

    <div class="space-4"></div>

    <div class="help-content">
        <h3 class="info-title smaller">1. Layout</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Default layout used for all pages (except for login) is:
                    <img src="images/default.png"/>

                    <ul>
                        <li>
                            1) Navbar
                        </li>

                        <li>
                            Inside <b>main-container</b> area:
                            <ul>
                                <li> 2) Sidebar</li>
                                <li> 3) Breadcrumbs (inside "main-content")</li>
                                <li> 4) Page content (inside "main-content")</li>
                                <li> 5) Settings box (inside "page-content")</li>
                                <li> 6) Footer</li>
                            </ul>
                        </li>
                    </ul>


                    <div class="space-4"></div>
<pre data-language="html">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
    &lt;!-- title, meta tags, list of stylesheets, etc ... --&gt;
 &lt;/head&gt;
  
 &lt;body class="no-skin"&gt;
    &lt;div class="navbar" id="navbar"&gt;
     &lt;!-- navbar goes here --&gt;
    &lt;/div&gt;
 
    &lt;div class="main-container" id="main-container"&gt;
     &lt;div class="sidebar responsive" id="sidebar"&gt;
      &lt;!-- sidebar goes here --&gt;
     &lt;/div&gt;
  
     &lt;div class="main-content"&gt;
      &lt;div class="breadcrumbs"&gt;
       &lt;!-- breadcrumbs goes here --&gt;
      &lt;/div&gt;
   
      &lt;div class="page-content"&gt;
        &lt;!-- setting box goes here if needed --&gt;

        &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
           &lt;!-- page content goes here --&gt;
          &lt;/div&gt;&lt;!-- /.col --&gt;
        &lt;/div&gt;&lt;!-- /.row --&gt;

      &lt;/div&gt;&lt;!-- /.page-content --&gt;
     &lt;/div&gt;&lt;!-- /.main-content --&gt;
	 
     &lt;!-- footer area --&gt;

   &lt;/div&gt;&lt;!-- /.main-container --&gt;

   &lt;!-- list of script files --&gt;
   
 &lt;/body&gt;
&lt;/html&gt;
</pre>
                </li>

                <li>
                    Starting with the following file you can find more details:
                    <br/>
                    <code data-open-file="html" class="open-file"><span
                            class="brief-show">mustache/app/views/layouts/</span>default.mustache</code>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller">2. Head element</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    <code>head</code> element contains title, meta tags, stylesheets and some scripts:
<pre data-language="html">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;!-- use the following meta to force IE use its most up to date rendering engine --&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  
  &lt;title&gt; page tite &lt;/title&gt;
  &lt;meta name="description" content="page description" /&gt;
  
  &lt;!-- stylesheets are put here, refer to files/css documentation --&gt;
  &lt;!-- some scripts should be  here, refer to files/javascript documentation --&gt;
 &lt;/head&gt;
</pre>

                    For more info about stylesheets and order of use, please see <a href="#files/css.order">CSS
                    order</a>.
                    <br/>
                    For more info about scripts and order of use, please see <a href="#files/javascript.order">Javascript
                    order</a>.

                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller">3. Viewport meta tag</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Please note that with mobile devices, pages may not look good when user zooms in/out,
                    especially when navbar or sidebar is fixed.
                    <br/>
                    One option is preventing user from zooming in/out using <code>user-scalable=no</code> property:
<pre data-language="html">
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
</pre>

                    The following links have more info:
                    <br/>
                    <a href="http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml">
                        http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
                    </a>
                    <br/>
                    <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">
                        developer.apple.com
                    </a>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller">4. Body element</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
<pre data-language="html">
 &lt;body class="no-skin"&gt;
   ...
 &lt;/body&gt;
</pre>

                    You can use one of the following classes to apply different skins:
                    <ol>
                        <li><code>.no-skin</code></li>
                        <li><code>.skin-1</code></li>
                        <li><code>.skin-2</code></li>
                        <li><code>.no-skin.skin-3</code></li>
                    </ol>

                    There is more information about this in
                    <a href="#settings.skins" class="help-more">Skins section</a>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller">5. End of document</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Here you put your script list and inline scripts.
                    <br/>
                    For more info about scripts and order of use, please see <a href="#files/javascript.order">Javascript
                    order</a>.
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->

    </div>
    <!-- /.help-content -->


    <div class="hr hr-double hr32"></div>
    <h2 class="blue lighter" data-id="#basics/layout.empty">
        Empty layout
    </h2>

    <div class="space-4"></div>

    <!-- #section:basics/layout.empty -->
    <div class="help-content">
        <h3 class="info-title smaller">Layout</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Empty layout is similar to default layout and is only used for
                    <code data-open-file="html" class="open-file">html/empty.html</code>
                    file which has minimal code for easier investigation:
                    <div class="space-4"></div>
<pre data-language="html">
 &lt;html&gt;
  &lt;head&gt;
     &lt;!-- title, meta tags, list of stylesheets, etc ... --&gt;
  &lt;/head&gt;
  
  &lt;body class="no-skin"&gt;
    &lt;div class="navbar" id="navbar"&gt;
     &lt;!-- navbar goes here --&gt;
    &lt;/div&gt;
 
    &lt;div class="main-container" id="main-container"&gt;
     &lt;div class="sidebar responsive" id="sidebar"&gt;
      &lt;!-- sidebar goes here --&gt;
     &lt;/div&gt;
  
     &lt;div class="main-content"&gt;
   
      &lt;div class="page-content"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
           &lt;!-- page content goes here --&gt;
          &lt;/div&gt;&lt;!-- /.col --&gt;
        &lt;/div&gt;&lt;!-- /.row --&gt;
      &lt;/div&gt;&lt;!-- /.page-content --&gt;
     &lt;/div&gt;&lt;!-- /.main-content --&gt;
	 
   &lt;/div&gt;&lt;!-- /.main-container --&gt;

   &lt;!-- list of script files --&gt;
   
  &lt;/body&gt;
 &lt;/html&gt;
</pre>
                </li>

                <li>
                    Starting with the following file you can find more details:
                    <br/>
                    <code data-open-file="html" class="open-file"><span
                            class="brief-show">mustache/app/views/layouts/</span>empty.mustache</code>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->

    </div>
    <!-- /.help-content -->
    <!-- /section:basics/layout.empty -->


    <div class="hr hr-double hr32"></div>
    <h2 class="blue lighter" data-id="#basics/layout.login">
        Login layout
    </h2>

    <div class="space-4"></div>

    <!-- #section:basics/layout.login -->
    <div class="help-content">
        <h3 class="info-title smaller">1. Layout</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Login layout used only for the login page is as follows:
                    <div class="space-4"></div>
<pre data-language="html">
&lt;html&gt;
 &lt;head&gt;
  
 &lt;/head&gt;

 &lt;body class="login-layout"&gt;
 
  &lt;div class="main-container"&gt;
   &lt;div class="main-content"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-sm-10 col-sm-offset-1"&gt;
     &lt;!-- page content goes here --&gt;
     &lt;/div&gt;&lt;!-- /.col --&gt;
    &lt;/div&gt;&lt;!-- /.row --&gt;
   &lt;/div&gt;&lt;!-- /.main-content --&gt;
  &lt;/div&gt;&lt;!-- /.main-container --&gt;


 &lt;/body&gt;
&lt;/html&gt;
</pre>
                </li>

                <li>
                    For more info about login page, please see <a href="#pages/login" class="help-more">login page</a>
                </li>

                <li>
                    Starting with the following file you can find more details:
                    <br/>
                    <code data-open-file="html" class="open-file"><span
                            class="brief-show">mustache/app/views/layouts/</span>login.mustache</code>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller">2. Scripts</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Fewer scripts are needed for login page.
                    <br/>
                    Basically, you just need <b>jquery</b> and the following snippet to switch to a different box:
<pre data-language="javascript">
jQuery(function($) {
 $(document).on('click', '.toolbar a[data-target]', function(e) {
    e.preventDefault();
    var target = $(this).data('target');
    $('.widget-box.visible').removeClass('visible');//hide others
    $(target).addClass('visible');//show target
 })
})
</pre>
                    <code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>login.js</code>
                    <br/>

                    Of course if you want to use extra functionality such as form validation
                    or elements such as datepicker or a slider,
                    you should include the relevant scripts.
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->

    </div>
    <!-- /.help-content -->
    <!-- /section:basics/layout.login -->

</section>